<!-- this is loaded through lobby.js -->

<div id='inappBlocksGuide' class='inappSubpage'>
    <div id="content">
      <div id="ipad-project-view-wrapper" class='content-container'>
        <div class="learn-tab learn-blocks">
        
          <!-- Yellow Blocks -->
          
          
          <div class="block-category-header" id="yellow-block-category-header"></div>
          <div class="block-category-header-line" id="yellow-block-category-header-line"></div>
          
          <table class='block-description-table'>
          <tr>
				<td>
					<div class="block-title" id="BLOCKS_GREEN_FLAG"></div>
					<div class="block-image-wrapper">
						<img class="block-image" src="inapp/images/onflag.png" >
					</div>
					<div class="block-description" id="BLOCKS_GREEN_FLAG_DESCRIPTION"></div>
				</td>

				<td>
					<div class="block-title" id="BLOCKS_ON_TAP"> </div>
					<div class="block-image-wrapper">
						<img class="block-image" src="inapp/images/ontap.png" >
					</div>
					<div class="block-description" id="BLOCKS_ON_TAP_DESCRIPTION"></div>
				</td>
          </tr>
          
          <tr>
          	<td>
		
			<div class="block-title" id="BLOCKS_SEND_MESSAGE"></div>
				<div class="block-image-wrapper">
					<img class="block-image" src="inapp/images/messagesend.png" >
				</div>
				<div class="block-description" id="BLOCKS_SEND_MESSAGE_DESCRIPTION"></div>

          	</td>
          	<td>
				<div class="block-title" id="BLOCKS_ON_MESSAGE"></div>
        	    <div class="block-image-wrapper">
                	<img class="block-image" src="inapp/images/messagereceive.png" >
              	</div>
              	<div class="block-description" id="BLOCKS_ON_MESSAGE_DESCRIPTION"></div>	
          	</td>
          </tr>
          <tr>
          	<td>
          		<div class="block-title" id="BLOCKS_ON_TOUCH"></div>
				<div class="block-image-wrapper">
					<img class="block-image" src="inapp/images/onbump.png" >
				</div>
				<div class="block-description" id="BLOCKS_ON_TOUCH_DESCRIPTION"></div>

			</td>
          	<td>
          	</td>
          </tr>
          </table> <!-- yellow blocks -->
          
        
          
          
          
          <!-- Blue Blocks -->
          <div class="block-category-header" id="blue-block-category-header"></div>
          <div class="block-category-header-line" id="blue-block-category-header-line"></div>
          
          <table class='block-description-table'>
          <tr><td>
              <div class="block-title" id="BLOCKS_MOVE_RIGHT"></div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/right.png" >
              </div>
              <div class="block-description" id="BLOCKS_MOVE_RIGHT_DESCRIPTION"></div>
          </td><td>
              <div class="block-title" id="BLOCKS_MOVE_LEFT"></div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/left.png" >
              </div>
              <div class="block-description" id="BLOCKS_MOVE_LEFT_DESCRIPTION"></div>
          </td></tr>
          <tr><td>
		      <div class="block-title" id="BLOCKS_MOVE_UP"></div>
			  <div class="block-image-wrapper">
				<img class="block-image" src="inapp/images/up.png" >
		  	  </div>
			  <div class="block-description" id="BLOCKS_MOVE_UP_DESCRIPTION"></div>
		  </td><td>
		   	  <div class="block-title" id="BLOCKS_MOVE_DOWN"> </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/down.png" >
              </div>
              <div class="block-description" id="BLOCKS_MOVE_DOWN_DESCRIPTION"></div>
		  </td></tr>
		  <tr><td>
		  	  <div class="block-title" id="BLOCKS_TURN_RIGHT">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/turnright.png" >
              </div>
              <div class="block-description" id="BLOCKS_TURN_RIGHT_DESCRIPTION">
              </div>
		  </td><td>
		       <div class="block-title" id="BLOCKS_TURN_LEFT">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/turnleft.png" >
              </div>
              <div class="block-description" id="BLOCKS_TURN_LEFT_DESCRIPTION">
              </div>
       
		  </td></tr>
          <tr><td>
		      <div class="block-title" id="BLOCKS_HOP"></div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/hop.png" >
              </div>
              <div class="block-description" id="BLOCKS_HOP_DESCRIPTION"> </div>
      
		  </td><td>
		      <div class="block-title" id="BLOCKS_GO_HOME"> </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/gohome.png" >
              </div>
              <div class="block-description" id="BLOCKS_GO_HOME_DESCRIPTION"></div>
		  </td></tr>
          
          </table> <!-- Blue blocks -->
          
        
          
          <!-- Purple Blocks -->
          <div class="block-category-header" id="purple-block-category-header"></div>
          <div class="block-category-header-line" id="purple-block-category-header-line"></div>
          
          <table class='block-description-table'>
          
			<tr><td>
				<div class="block-title" id="BLOCKS_SAY"></div>
				<div class="block-image-wrapper">
					<img class="block-image" src="inapp/images/say.png" >
				</div>
				<div class="block-description" id="BLOCKS_SAY_DESCRIPTION"></div>
			</td><td>
 				<div class="block-title" id="BLOCKS_GROW"></div>
                <div class="block-image-wrapper">
                    <img class="block-image" src="inapp/images/grow.png" >
                </div>
                <div class="block-description" id="BLOCKS_GROW_DESCRIPTION"></div>
			</td></tr>
			<tr><td>
				<div class="block-title" id="BLOCKS_SHRINK"> </div>
				<div class="block-image-wrapper">
					<img class="block-image" src="inapp/images/shrink.png" >
				</div>
				<div class="block-description" id="BLOCKS_SHRINK_DESCRIPTION"> </div>
    		</td><td>
				<div class="block-title" id="BLOCKS_RESET_SIZE"></div>
				<div class="block-image-wrapper">
					<img class="block-image" src="inapp/images/reset.png" >
				</div>
				<div class="block-description" id="BLOCKS_RESET_SIZE_DESCRIPTION"></div>
			</td></tr>
			<tr><td>
 				<div class="block-title" id="BLOCKS_HIDE"></div>
                <div class="block-image-wrapper">
                	<img class="block-image" src="inapp/images/hide.png" >
              	</div>
              	<div class="block-description" id="BLOCKS_HIDE_DESCRIPTION"></div>
			</td><td>
			  <div class="block-title" id="BLOCKS_SHOW"></div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/show.png" >
              </div>
              <div class="block-description" id="BLOCKS_SHOW_DESCRIPTION"></div>
 

			</td></tr>

          </table> <!-- Purple Blocks -->
         
         <!-- Green blocks -->
         <div class="block-category-header" id="green-block-category-header"></div>
         <div class="block-category-header-line" id="green-block-category-header-line"></div>
          
          <table class='block-description-table'>
          
          <tr><td>
              <div class="block-title" id="BLOCKS_POP">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/pop.png" >
              </div>
              <div class="block-description" id="BLOCKS_POP_DESCRIPTION">
              </div>
 
          </td><td>
              <div class="block-title" id="BLOCKS_PLAY_RECORDED">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/playsound.png" >
              </div>
              <div class="block-description" id="BLOCKS_PLAY_RECORDED_DESCRIPTION">
              </div>
          </td></tr>
          </table>
          
          <!-- Orange blocks -->
          
          <div class="block-category-header" id="orange-block-category-header">
          </div>
          <div class="block-category-header-line" id="orange-block-category-header-line"></div>
          <table class='block-description-table'>
          
          <tr><td>
          
             <div class="block-title" id="BLOCKS_WAIT"> </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/wait.png" >
              </div>
              <div class="block-description" id="BLOCKS_WAIT_DESCRIPTION"></div>
           
          </td><td>
               <div class="block-title" id="BLOCKS_STOP"></div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/stop.png" >
              </div>
              <div class="block-description" id="BLOCKS_STOP_DESCRIPTION"></div>
          </td></tr>
          <tr><td>
          
              <div class="block-title" id="BLOCKS_SET_SPEED"></div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/speed.png" >
              </div>
              <div class="block-description" id="BLOCKS_SET_SPEED_DESCRIPTION"> </div>
          </td><td>
          
            <div class="block-title" id="BLOCKS_REPEAT"></div>
              <div class="block-image-wrapper">
                <img class="block-image-repeat" src="inapp/images/repeat.png" >
              </div>
              <div class="block-description-repeat" id="BLOCKS_REPEAT_DESCRIPTION"></div>
          </td></tr>

      </table> <!-- Green Blocks -->
    
          
      <!-- Red blocks -->
      <div class="block-category-header" id="red-block-category-header"></div>
      <div class="block-category-header-line" id="red-block-category-header-line"></div>
 	  <table class='block-description-table'>
          
          <tr><td>
              <div class="block-title" id="BLOCKS_END">
              </div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/end.png" >
              </div>
              <div class="block-description" id="BLOCKS_END_DESCRIPTION">
              </div>

          </td><td>
             <div class="block-title" id="BLOCKS_REPEAT_FOREVER"></div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/forever.png" >
              </div>
              <div class="block-description" id="BLOCKS_REPEAT_FOREVER_DESCRIPTION"></div>
          </td></tr>
          <tr><td>
          	  <div class="block-title" id="BLOCKS_GO_TO_PAGE"></div>
              <div class="block-image-wrapper">
                <img class="block-image" src="inapp/images/page.png" >
              </div>
              <div class="block-description" id="BLOCKS_GO_TO_PAGE_DESCRIPTION">
              </div>
          </td><td>
            
          </td></tr>


       </table> <!-- Red Blocks -->
        
        </div> <!-- learn tab -->
      </div> <!--  ipad-project-view-wrapper -->
    </div> <!-- content -->
</div> <!-- inappBlocksGuide -->
